<template>
	<el-row>
		<el-form ref="form" :model="form" label-width="120px"  label-suffix=":">
			<el-col v-for="(item,index) in fields" :span="item.span">
				<el-form-item :label="item.label"
                      :prop="item.prop"
                      :rules="item.rules"
                      >
					<el-input v-model="form[item.prop]" v-if="item.type=='text'" clearable  :placeholder="item.placeholder" ></el-input>
					<!--radio-->
					<el-radio-group v-model="form[item.prop]" v-if="item.type == 'radio'">
						<el-radio v-for="i in options[item.prop]" :key="i.value" :label="i.value">{{i.label}}</el-radio>
					</el-radio-group>
					<!-- 下拉选择框 -->
					<el-select v-model="form[item.prop]" v-if="item.type == 'select'" :multiple="item.multiple && (item.multiple ? item.multiple : false)" clearable>
						<el-option v-for="i in options[item.prop]" :key="i.value" :value="i.value" :label="i.label"></el-option>
					</el-select>
          <!-- 树状结构 -->
          <treeselect
              v-if="item.type == 'treeSelect'"
              v-model="form[item.prop]"
              :options="options[item.prop]"
              :normalizer="normalizer"
              :load-options="loadOptions"
              :placeholder="item.placeholder"
          />
				</el-form-item>
			</el-col>
		</el-form>
	</el-row>

</template>

<script>
	import { requestByUrl } from "@/utils/tools"
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	const types = ['radio','select','treeSelect'] // 需要设置子选项的标签类型
	export default {
		name:"CommonForm",
    components:{
      Treeselect
    },
		props:{
			fields:{
				type:Array,
				default:()=>{
					return []
				},
				required:true
			},
			form:Object
		},
		created() {
			this.init()
		},
		data() {
			return {
				options:{},
        res:{} // 储存请求的结果
			}
		},
		methods:{
      init(isFirst = true) {
        // console.log(this.fields)
        console.log(this.form)
			  let vm = this
				this.fields.map(async item => {
            if (types.indexOf(item.type) > -1 && item.options) {
              if (item.options.type == 'local') {
                this.$set(this.options, item.prop, item.options.values)
              } else {
                let list = []
                let result;
                let d = {}
                if (isFirst) {
                  if (item.type == 'treeSelect') {
                    d['_tree'] = true
                    d['_order'] = ["sort"]
                    d['_where'] = {
                      parent__id__isnull:true
                    }
                  }
                  result = await requestByUrl(item.options.values.url, item.options.values.methods,d)
                  this.res[item.prop] = result
                } else {
                  result = this.res
                }
                if (item.type != 'treeSelect') {
                  if (result.data && result.data.lists.length > 0) {
                    result.data.lists.map(i => {
                      list.push({
                        label: i.name,
                        value: i.id
                      })
                    })
                  }
                } else if (item.type == 'treeSelect') {
                  if (vm.res[item.prop]) {
                    // let l = vm.res[item.prop].data.lists.map((it) => {
                    //   it.parentId = it.parent ? it.parent.id : null;
                    //   return it;
                    // });
                    // list = this.handleTree(l, "id");
                    // list = this.trimChildren(vm.res[item.prop].data.lists)
                    list = vm.res[item.prop].data.lists
                  }
                }
                this.$set(this.options, item.prop, list)
              }
            }
				})
			},

			resetForm() {
        // this.$refs['form'].resetFields()
        this.resetForm('form');
			},
      validate(callback) {

        this.$refs.form.validate((valid)=>{
          if (valid) {
            callback()
          }
        })
      },
      normalizer(node) {
        if ((node.children && !node.children.length) || node.children == null) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        };
      },
      async loadOptions({action,parentNode,callback}) {
        await this.init(false)
      }
		}

	}
</script>

<style>
</style>
